<template>
  <div class="home">
    <HelloWorld />
    <div id="app">
      <div id="main" style="width:800px;height:500px;"></div>
    </div>
    <p>产品列表</p>
    <Table2 :tableData="tableData" v-bind:tableHead="tableHead" />
    <p>账户</p>
    <Account />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Table2 from "../components/filtertableZY/table2";
import Account from "../views/Account";
import { getShopApi } from "../api/index";

export default {
  name: "home",
  data() {
    return {
      tableData: [],
      tableHead: [
        { prop: "date", label: "时间" },
        { prop: "prodName", label: "产品" },
        { prop: "kefu", label: "客服" },
        { prop: "userName", label: "用户" },
        { prop: "originName", label: "供货商" },
        { prop: "other", label: "其他" }
      ]
    };
  },
  components: {
    HelloWorld,
    Table2,
    Account
  },

  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "热门产品统计表"
        },
        tooltip: {},
        legend: {
          data: [""]
        },
        xAxis: {
          data: ["葡萄", "番石榴", "榴莲", "哈密瓜", "西瓜", "苹果"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [10, 25, 36, 15, 15, 20]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 获取购物车
    getShopData(param) {
      getShopApi(param).then(res => {
        // 赋值
        this.total = res.total;
        this.tableData = res.list;
        // console.log(res);
      });
    }
  },
  mounted() {
    this.drawChart();
    this.getShopData();
  }
};
</script>
